<clr-alert *ngIf="errorFlag" [clrAlertType]="'danger'">
    <div class="alert-item">{{alertMessage}}</div>
</clr-alert>
<clr-alert *ngIf="successFlag" [clrAlertType]="'success'">
    <div class="alert-item">{{alertMessage}}</div>
</clr-alert>
<clr-datagrid [clrDgLoading]="isLoading">
    <clr-dg-action-bar>
        <div class="btn-group">
            <button type="button" class="btn btn-sm btn-secondary" (click)="populateLoggerForm({'key':null,'value':{'configuredLevel':null,'effectiveLevel':null}});loggerModal=true;addEdit='Add'"><clr-icon shape="plus"></clr-icon> Logger</button>
        </div>
    </clr-dg-action-bar>
	<clr-dg-column [clrDgField]="'key'">Logger Name</clr-dg-column>
    <clr-dg-column [clrDgField]="'value.configuredLevel'">Configured Level</clr-dg-column>
    <clr-dg-column [clrDgField]="'value.effectiveLevel'">Effective Level</clr-dg-column>
    <clr-dg-row *clrDgItems="let logger of loggers | keyvalue" [clrDgItem]="logger">
        <clr-dg-action-overflow>
            <button class="action-item" (click)="populateLoggerForm(logger);loggerModal=true;addEdit='Edit'">Edit</button>
        </clr-dg-action-overflow>
		<clr-dg-cell>{{logger.key}}</clr-dg-cell>
        <clr-dg-cell>{{logger.value.configuredLevel}}</clr-dg-cell>
        <clr-dg-cell>{{logger.value.effectiveLevel}}</clr-dg-cell>
    </clr-dg-row>
	<clr-dg-footer>
		<clr-dg-pagination #pagination [clrDgPageSize]="30">
			<clr-dg-page-size [clrPageSizeOptions]="[30,50,100]">Loggers per page</clr-dg-page-size>
			{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} loggers
		</clr-dg-pagination>
	</clr-dg-footer>
</clr-datagrid>
<clr-modal [(clrModalOpen)]="loggerModal" [clrModalClosable]="false" [clrModalSize]="'lg'">
    <h3 class="modal-title">{{addEdit}} Logger</h3>
    <div class="modal-body">
        <form #loggerForm="ngForm" (ngSubmit)="updateLogger(loggerForm.value);loggerModal=false;" *ngIf="loggerFormData" ngNativeValidate>
            <section class="form-block">
                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" name="name" [(ngModel)]="loggerFormData.name" size="54" [required]="addEdit == 'Add'" [readonly]="addEdit == 'Edit'">
                </div>
                <fieldset ngModelGroup="configProp">
                    <div class="form-group">
                        <label for="configuredLevel">Configured Level</label>
                        <div class="select">
                            <select name="configuredLevel" [(ngModel)]="loggerFormData.configProp.configuredLevel" required>
                                <ng-container *ngFor="let level of levels">
                                    <option [value]="level">{{level}}</option>
                                </ng-container>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="effectiveLevel">Effective Level</label>
                        <div class="select">
                            <select name="effectiveLevel" [(ngModel)]="loggerFormData.configProp.effectiveLevel" required>
                                <ng-container *ngFor="let level of levels">
                                    <option [value]="level">{{level}}</option>
                                </ng-container>
                            </select>
                        </div>
                    </div>
                </fieldset>
            </section>
            <button type="button" class="btn btn-outline" (click)="loggerModal=false;ngOnInit();">CANCEL</button>
            <button type="submit" class="btn btn-primary">SUBMIT</button>
        </form>
    </div>
</clr-modal>
